<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

</head>
<body>
    <div style="text-align: center;margin-bottom: 150px;margin-top: 50px">
        <h2>ChatDemo</h2>
    </div>
    <div id="login_app" style="text-align: center;align-items: center;justify-content: center;display: flex">
        <div>
            <el-form ref="form" :model="form" label-width="80px" style="text-align: center">
                <el-form-item label="用户名" style="width: 300px">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" style="width: 300px">
                    <el-input v-model="form.userPassword"></el-input>
                </el-form-item>
                <el-form-item style="width: 300px">
                    <el-button id="loginBtn" type="primary" @click="userLogin">登录</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</body>
<!--vue-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!--axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!--饿了吗-->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el:"#login_app",
        data(){
            return{
                form:{
                    userName:"",
                    userPassword:""
                }
            }
        },
        methods:{
            userLogin(){
                let _this = this
                axios.post("/user/userLogin",this.form).then(function (res) {
                    console.log(res)
                    //根据返回结果来选择“行为”
                    if (res.data.flag===true){
                        //将token”令牌“存放到浏览器
                        sessionStorage.setItem("user",res.data.object)
                        window.location.href= '/templates/main.html'
                    }else {
                        //重新输入用户名和密码
                        _this.form = ""
                        alert("用户名或密码错误，请重新输入！")
                    }
                })
            }
        }
    })
</script>
</html>